<template>
  <div class="order-page" v-if="orderInfo">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <button class="back-button" @click="goBack">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="m15 18-6-6 6-6" />
        </svg>
      </button>
      <h2>确认订单</h2>
    </div>

    <!-- 收货地址 -->
    <div class="address-section">
      <AddressSelector :address="address" @click="selectAddress" />
    </div>

    <!-- 商品信息 -->
    <div class="product-section">
      <div class="product-card">
        <img :src="orderInfo.selectedVariant.imageUrl || orderInfo.product.mainImage" :alt="orderInfo.product.name" class="product-image">
        <div class="product-info">
          <div class="product-name">{{ orderInfo.product.name }}</div>
          <div class="product-variant">{{ orderInfo.selectedVariant.name }}</div>
          <div class="product-price">
            <span class="price-label">¥</span>
            <span class="price-value">{{ orderInfo.totalPrice }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="order-info-section">
      <div class="info-item">
        <span class="label">商品数量</span>
        <span class="value">{{ orderInfo.quantity }}</span>
      </div>
      <div class="info-item">
        <span class="label">商品规格</span>
        <span class="value">{{ orderInfo.selectedGender }}</span>
      </div>
    </div>

    <!-- 底部结算栏 -->
    <div class="checkout-bar">
      <div class="price-info">
        <span>实付金额：</span>
        <span class="total-price">¥{{ orderInfo.totalPrice }}</span>
      </div>
      <button class="submit-button" @click="submitOrder">提交订单</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import AddressSelector from '@/components/AddressSelector/AddressSelector.vue'
import {createOrder} from './api/index'
const props = defineProps({
  orderInfo: {
    type: Object,
    required: true
  }
})
const router = useRouter()
const route = useRoute()

const goBack = () => {
  router.go(-1)
}

// 地址数据
const address = ref({
  name: '填写地址',
  phone: '电话号码132****1111',
  fullAddress: '详细地址'
})

// 监听路由参数变化
onMounted(() => {
  // 从路由参数中获取订单信息
  // console.log('接收到的订单信息:', props.orderInfo)
  // console.log('接收到的地址信息:', props.orderInfo.address)
  // 设置地址信息
  address.value.name = props.orderInfo.address.recipientName
  address.value.phone = props.orderInfo.address.phone
  address.value.fullAddress = props.orderInfo.address.address
  // 设置订单信息
  orderData.value.addressesId = props.orderInfo.address.addressesId
  orderData.value.productId = props.orderInfo.product.id
  orderData.value.productName = props.orderInfo.product.name
  orderData.value.quantity = props.orderInfo.quantity
  orderData.value.productPrice = props.orderInfo.product.price
  orderData.value.productImageUrl = props.orderInfo.product.mainImage
  orderData.value.recipientName = props.orderInfo.address.recipientName
  orderData.value.phone = props.orderInfo.address.phone
  orderData.value.address = address.value.fullAddress
  console.log('订单信息:', orderData.value)
  // 获取选中的地址信息
  const selectedAddress = route.query.selectedAddress
  if (selectedAddress) {
    address.value = JSON.parse(selectedAddress)
    console.log('选中的地址信息:', address.value)
    //改变订单信息中的地址信息
    orderData.value.recipientName = address.value.name
    orderData.value.phone = address.value.phone
    orderData.value.address = address.value.fullAddress
    console.log('---订单信息中的地址信息:', orderData.value)
  }
})

const selectAddress = () => {
  // 跳转到地址选择页面时携带订单信息
  router.push({
    path: '/address',
    query: {
      orderInfo: JSON.stringify(props.orderInfo)
    }
  })
}
//订单数据
const orderData = ref({
  // addressesId: 1,
  // productId: 2,
  // productName: "优质猫粮",
  // quantity: 2,
  // productPrice: 99.90,
  // productImageUrl: "https://example.com/images/cat-food.jpg",
  // recipientName: "张三",
  // phone: "13800138000",
  // address: "重庆市南岸区学府大道1号"
})
const submitOrder = async() => {
  try {
    const res = await createOrder(orderData.value)
    console.log('订单创建结果', res)

    // 如果订单创建成功，跳转到支付页面
    if (res.data.code === 200) { // 假设 200 是成功状态码
      // 构建支付页面需要的订单信息
      const paymentOrderInfo = {
        orderNumber: res.data.data.orderNumber, // 订单号
        totalPrice: orderData.value.productPrice * orderData.value.quantity,
        items: [{
          name: orderData.value.productName,
          imageUrl: orderData.value.productImageUrl,
          quantity: orderData.value.quantity,
          price: orderData.value.productPrice
        }]
      }

      // 跳转到支付页面
      router.push({
        path: '/order/payment',
        query: {
          orderInfo: JSON.stringify(paymentOrderInfo)
        }
      })
    } else {
      throw new Error('订单创建失败')
    }
  } catch (error) {
    console.error('提交订单失败:', error)
    // 这里可以添加错误提示
    alert('提交订单失败，请重试')
  }
}
</script>

<style lang="scss" scoped>
.order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
}

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #f3f0ff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;

  .back-button {
    background: none;
    border: none;
    padding: 8px;
    margin-left: -8px;
  }

  h2 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 16px;
  }
}

.address-section {
  margin-top: 44px;
  background-color: white;
  padding: 16px;
  margin-bottom: 12px;
}

.product-section {
  background-color: white;
  padding: 16px;
  margin-bottom: 12px;

  .product-card {
    display: flex;
    align-items: center;

    .product-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 12px;
    }

    .product-info {
      flex: 1;

      .product-name {
        font-size: 16px;
        margin-bottom: 4px;
      }

      .product-variant {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }

      .product-price {
        color: #ff3b30;

        .price-label {
          font-size: 14px;
        }

        .price-value {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}

.order-info-section {
  background-color: white;
  padding: 16px;

  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
    }

    .value {
      color: #333;
    }
  }
}

.checkout-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 16px;

  .price-info {
    flex: 1;

    .total-price {
      color: #ff3b30;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .submit-button {
    width: 120px;
    height: 36px;
    background-color: #ff3b30;
    color: white;
    border: none;
    border-radius: 18px;
    font-size: 16px;
    margin-left: 16px;

    &:active {
      opacity: 0.9;
    }
  }
}
</style>
